<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="360px"
    :close-on-click-modal="false"
    :show-close="true"
    align-center
    class="confirm-dialog"
  >
    <div class="confirm-content">
      <div class="warning-icon-container">
        <el-icon class="warning-icon"><Warning /></el-icon>
      </div>
      <span class="confirm-message">确认{{ action }}</span>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button  @click="handleCancel" class="cancel-btn">取消</el-button>
        <el-button v-throttle-click="2000" type="primary" @click="handleConfirm" class="confirm-btn">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Warning } from '@element-plus/icons-vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  action: {
    type: String,
    default: ''
  },
  dialogTitle: {
    type: String,
    default: '提示'
  },
})

const emit = defineEmits(['update:visible', 'cancel', 'confirm'])

// 内部变量，用于控制对话框显示
const dialogVisible = ref(false)

// 监听外部传入的visible属性变化
watch(() => props.visible, (newVal) => {
  dialogVisible.value = newVal
})

// 监听内部dialogVisible变化，通知父组件
watch(() => dialogVisible.value, (newVal) => {
  if (newVal !== props.visible) {
    emit('update:visible', newVal)
  }
})

// 取消确认操作
const handleCancel = () => {
  dialogVisible.value = false
  emit('cancel')
}

// 确认操作
const handleConfirm = () => {
  dialogVisible.value = false
  emit('confirm')
}
</script>

<style lang="scss" scoped>
.confirm-dialog {
  border-radius: 4px;
  overflow: hidden;
  
  :deep(.el-dialog__header) {
    padding: 12px 20px;
    margin-right: 0;
    border-bottom: 1px solid #ebeef5;
    
    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 20px;
  }
  
  :deep(.el-dialog__footer) {
    padding: 10px 20px;
    border-top: 1px solid #ebeef5;
    
    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      
      .cancel-btn {
        padding: 6px 16px;
        border-radius: 3px;
      }
      
      .confirm-btn {
        padding: 6px 16px;
        border-radius: 3px;
      }
    }
  }
  
  .confirm-content {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding-bottom: 30px;
    .warning-icon-container {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .warning-icon {
        color: #ff5a00;
        font-size: 30px;
      }
    }
    
    .confirm-message {
      font-size: 14px;
      color: #303133;
      margin-left: 10px;
    }
  }
}
</style> 